<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" active-color="#41a863" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
			 swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper style="height: 1600rpx;" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y style="height: 1600rpx;width: 100%;" @scrolltolower="onreachBottom">
					<view class="top">
						<u-avatar size="120" :src="item.avatar"></u-avatar>
						<view class="userDetails">
							<view>
								<u-icon name="account-fill"></u-icon>
								<text>{{item.name}}</text>
							</view>
							<view v-if="item.department != null">
								<u-icon name="more-circle-fill"></u-icon>
								<text>{{item.department}}</text>
							</view>
							<view v-else>
								<u-icon name="more-circle-fill"></u-icon>
								<text>{{item.location}}</text>
							</view>
							<view>
								<u-icon name="phone-fill"></u-icon>
								<text>{{item.mobliephone}}</text>
							</view>
						</view>
					</view>


					<view>
						<u-field v-model="evaluate.content" label="评语" placeholder="请填写验证码" type="textarea"></u-field>

					</view>
					<view class="rate-class">
						<u-rate :count="count" v-model="value"></u-rate>
					</view>
					<view>
						<button>保存 </button>
					</view>


				</scroll-view>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				value: 2,
				evaluate: {
					content: ""
				},
				tabs: [{
					avatar: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif",
					name: "张三",
					department: "软件系",
					mobliephone: "1313131223",
				}, {
					name: 12,
					location: "广州市天河区"
				}],
				list: [{
					name: '教师评价'
				}, {
					name: '企业评价'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	}
</script>

<style lang="scss">
	.top {
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #d3dce6;
		margin-bottom: 10rpx;

		.userDetails {
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			font-size: 30rpx;

			view {
				text {
					margin-left: 20rpx;
				}
			}
		}
	}
	
	.rate-class {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
